<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #352c2c
        }

        a {
            text-decoration: none
        }

        h2 em {
            position: relative;
            font-style: normal;
            text-align: left;
            overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
        }

        .container {
            width: 320px;
            padding: 0 10px;
            margin: 10px auto;
            background: #ddd
        }

        .container a {
            display: inline-block;
            text-align: center
        }

        h2 {
            text-align: center;
            padding: 10px 0
        }
    </style>
</head>

<body>

    <!-- 只有一行时居中显示文字，多行居左显示，最多两行超过用省略号结尾 -->
    <div class="container">
        <h2><a href="###"><em>我是单行标题居中</em></a></h2>
        <h2><a href="###"><em>我是两行标题两行标题两行标题居左</em></a></h2>
        <h2><a href="###"><em>我是超过两行的标题最后点号省略我是超过两行的标题最后点号省略标题最后点号省略</em></a></h2>
    </div>

    <h3>
        overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
    </h3>


    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos soluta </p>

</body>

</html>